<template>
  <el-card v-loading="loading" class="product-detail-container">
    <el-button icon="arrow-left" size="small" style="margin-bottom: 10px" type="warning" @click="router.go(-1)">返回
    </el-button>
    <div v-if="productDetail">
      <!-- 商品主要信息 -->
      <el-row :gutter="30">
        <!-- 左侧图片轮播 -->
        <el-col :span="12">
          <el-card cl
                   ass="image-card" shadow="never">
            <el-carousel
                :autoplay="true"
                :interval="4000"
                height="400px"
                type="card"
            >
              <el-carousel-item v-for="(image, index) in productDetail.images" :key="index">
                <el-image
                    :initial-index="index"
                    :preview-src-list="productDetail.images.map(img => img.url)"
                    :src="image.url"
                    fit="cover"
                    style="width: 100%; height: 100%"
                />
              </el-carousel-item>
            </el-carousel>
            <el-image
                v-if="!productDetail.images || productDetail.images.length === 0"
                :preview-src-list="[productDetail.image?.url]"
                :src="productDetail.image?.url"
                fit="cover"
                style="width: 100%; height: 400px"
            />
          </el-card>
        </el-col>

        <!-- 右侧商品信息 -->
        <el-col :span="12">
          <el-card class="info-card" shadow="never">
            <div class="product-header">
              <h1 class="product-title">{{ productDetail.name }}</h1>
              <div class="product-tags">
                <el-tag v-if="productDetail.status === 1" size="large" type="success">在售</el-tag>
                <el-tag v-else size="large" type="info">已售</el-tag>
                <el-tag size="large" style="margin-left: 8px" type="info">{{ productDetail.categoryName }}</el-tag>
              </div>
            </div>

            <p class="product-description">{{ productDetail.description }}</p>

            <!-- 卖家信息 -->
            <div class="seller-info">
              <div class="seller-header">
                <el-icon>
                  <User/>
                </el-icon>
                <span class="seller-name">卖家：{{ productDetail.sellerName }}</span>
              </div>
              <div class="contact-info">
                <el-icon>
                  <Phone/>
                </el-icon>
                <span>联系方式：{{ productDetail.contact }}</span>
              </div>
            </div>

            <!-- 价格信息 -->
            <div class="price-section">
              <div class="price-info">
                <span class="current-price">¥{{ productDetail.price?.toFixed(2) }}</span>
              </div>
              <div class="status-info">
                <el-icon>
                  <Clock/>
                </el-icon>
                <span>发布时间：{{ productDetail.createTime }}</span>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-section">
              <el-button
                  icon="shop"
                  type="success"
                  size="large"
                  @click="handleBuyNow"
              >
                {{ '立即购买' }}
              </el-button>
              <el-button
                  :icon="productDetail.collect ? StarFilled : Star"
                  :type="productDetail.collect ? 'warning' : 'default'"
                  size="large"
                  @click="handleToggleCollect"
              >
                {{ productDetail.collect ? '已收藏' : '收藏' }}
              </el-button>
              <el-button
                  :disabled="productDetail.status !== 1"
                  :icon="ChatDotRound"
                  size="large"
                  type="primary"
                  @click="handleContact"
              >
                联系卖家
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div v-if="productDetail.reviewList && productDetail.reviewList.length > 0">
        <div
            v-for="review in productDetail.reviewList"
            :key="review.id"
            class="review-item"
        >
          <div class="review-header">
            <el-avatar
                :icon="UserFilled"
                :size="40"
                :src="review.userAvatar"
            />
            <div class="review-user-info">
              <div class="user-name">{{ review.userName }}</div>
              <div class="review-rating">
                <el-rate
                    v-model="review.rating"
                    disabled
                    size="small"
                />
                <span class="review-time">{{ review.createTime }}</span>
              </div>
            </div>
          </div>
          <div class="review-content">{{ review.content }}</div>
        </div>
      </div>
      <el-empty v-else description="暂无评价"/>
    </div>

    <OrderCreateDialog ref="orderRef"></OrderCreateDialog>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {ChatDotRound, Clock, Phone, Star, StarFilled, User, UserFilled} from '@element-plus/icons-vue'
import request from '@/utils/request'
import OrderCreateDialog from "@/components/OrderCreateDialog.vue";

// 立即购买
const orderRef = ref(null)
const handleBuyNow = async () => {
  const product = productDetail.value
  product.count = 1
  product.businessId = product.id
  orderRef.value.open([product], 2)
}

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const productDetail = ref(null)

// 获取商品详情
const handleGetProductDetail = async () => {
  loading.value = true
  const productId = route.query.id
  productDetail.value = await request.get(`/secondhandGoods/${productId}`)
  loading.value = false
}

// 切换收藏状态
const handleToggleCollect = async () => {
  const msg = await request.post('/collect', {businessType: 2, businessId: productDetail.value.id})
  productDetail.value.collect = !productDetail.value.collect
  ElMessage.success(String(msg))
}

// 联系卖家
const handleContact = async () => {
  const id = await request.post('/chat/createSession', {
    businessId: props.product.id,
    businessType: 2,
    userId: props.product.sellerId
  })
  await router.push(`/userHome/chatRoom?id=${id}`)
}

// 初始化
onMounted(async () => {
  await handleGetProductDetail()
  // 调试输出图片路径
  if (productDetail.value) {
    if (productDetail.value.images && productDetail.value.images.length > 0) {
      productDetail.value.images.forEach((img, idx) => {
        console.log(`[调试] 商品图片${idx}:`, img.url)
      })
    } else if (productDetail.value.image && productDetail.value.image.url) {
      console.log('[调试] 商品主图片:', productDetail.value.image.url)
    }
  }
})
</script>

<style scoped>
.product-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.image-card, .info-card, .recommend-card {
  border-radius: 12px;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.product-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  flex: 1;
}

.product-tags {
  display: flex;
  gap: 8px;
}

.product-description {
  font-size: 16px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
}

.seller-info {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.seller-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: #fff5f5;
  border-radius: 8px;
  border-left: 4px solid #ff4757;
}

.current-price {
  font-size: 28px;
  font-weight: 600;
  color: #ff4757;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
}

.action-section {
  display: flex;
  gap: 16px;
}

.action-section .el-button {
  flex: 1;
  height: 48px;
  font-size: 16px;
}

/* 轮播图样式 */
:deep(.el-carousel__item) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-carousel--card .el-carousel__item) {
  width: 100% !important;
  left: 0 !important;
  transform: translateX(0) scale(1) !important;
  margin: 0 !important;
}

:deep(.el-carousel__indicator button) {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-carousel__indicator.is-active button) {
  background-color: #409EFF !important;
}

:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.6) !important;
  opacity: 1 !important;
}
</style> 